<template>
  <div class="upkeep">
    <div class="header">
      <el-button type="primary" @click="openDialog">新增</el-button>
    </div>
    <div class="content">
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%" v-loading="loading">
        <el-table-column label="主标题" width="200">
          <template #default="{ row }">
            <div class="title text">{{ row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template #default="{ row }">
            <div class="sub__title text">
              {{ row.desc }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="封面" width="300">
          <template #default="{ row }">
            <img class="poster" :src="row.poster" alt="封面" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="warning" @click="updateData(row.id)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定要删除此轮播图吗"
              @confirm="deleteData(row.id)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
              <template #actions="{ confirm, cancel }">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button type="danger" size="small" @click="confirm">
                  确定
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 操作弹层 -->
      <el-dialog
        v-model="optionDialogVisible"
        :title="optionDoalogTitle"
        width="1000"
      >
        <div class="dia_content">
          <el-form :model="optionForm" v-loading="loading">
            <el-form-item label="主标题" label-width="80">
              <el-input
                v-model="optionForm.title"
                placeholder="请输入主标题..."
              ></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="80">
              <el-input
                type="textarea"
                v-model="optionForm.desc"
                :autosize="{ minRows: 4, maxRows: 10 }"
                placeholder="请输入描述..."
              ></el-input>
            </el-form-item>
            <el-form-item label="标签" label-width="80">
              <template v-for="(item, index) in optionForm.tag" :key="index">
                <el-tag type="primary" closable  @close="handleClose(item)">{{ item }}</el-tag>
              </template>
              <el-input
                v-if="inputVisible"
                ref="InputRef"
                v-model="inputValue"
                style="width: 150px"
                size="small"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
              />
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
              >
                添加标签
              </el-button>
            </el-form-item>
            <el-form-item label="封面" label-width="80">
              <imageView
                :src="[optionForm.poster]"
                @addImage="addImage"
                @deleteImage="deleteImage"
              />
            </el-form-item>
            <!-- 详情 -->
            <template v-for="(item, index) in optionForm.content" :key="index">
              <el-form-item label="次标题" label-width="80">
                <el-input
                  v-model="item.subTitle"
                  placeholder="请输入次标题..."
                ></el-input>
              </el-form-item>
              <el-form-item
                label="内容描述"
                v-if="item.desc || optionDoalogTitle === '新增'"
                label-width="80"
              >
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 50 }"
                  v-model="item.desc"
                  placeholder="请输入内容描述..."
                ></el-input>
              </el-form-item>
              <el-form-item
                label="内容代码"
                v-if="item.code || optionDoalogTitle === '新增'"
                label-width="80"
              >
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 10, maxRows: 50 }"
                  v-model="item.code"
                  placeholder="请输入内容描述..."
                ></el-input>
              </el-form-item>
            </template>
          </el-form>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="optionDialogVisible = false">取消</el-button>
            <el-button
              v-if="optionDoalogTitle === '新增'"
              type="warning"
              @click="addContent"
              >增加内容</el-button
            >
            <el-button type="primary" @click="submit" :loading="loading"
              >确定</el-button
            >
          </div>
        </template>
      </el-dialog>

      <!-- 分页器 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="5"
        :total="count"
        @change="pageChangeHandler"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from 'vue'
import type { InputInstance } from 'element-plus'

import imageView from '@/base-ui/image-view/index.vue'
import {
  addProblemApi,
  getProblemListApi,
  upload,
  deleteProblemApi,
  updateProblemApi
} from '@/api'

import { normalOptions } from '@/hooks/normalOptions'

const inputVisible = ref(false) // 标签输入框
const inputValue = ref('') // 标签输入框内容
const InputRef = ref<InputInstance>() // 标签输入框实例

let optionForm = reactive({
  // 表单数据
  title: '' as any,
  poster: '',
  tag: [] as any[],
  id: 0 as any,
  desc: '' as any,
  content: [
    {
      subTitle: '',
      desc: '',
      code: ''
    }
  ] as any[]
})

// 赋值数据
const assignmentData = (data: any) => {
  optionForm.title = data.title
  optionForm.poster = data.poster
  optionForm.tag = data.tag
  optionForm.id = data.id
  optionForm.desc = data.desc
  optionForm.content = JSON.parse(JSON.stringify(data.content))
  console.log(data)
}

// 清空数据
const clearFormData = () => {
  for (const key in optionForm) {
    if (key === 'tag') {
      optionForm[key] = []
    } else if (key === 'content') {
      optionForm[key] = [
        {
          subTitle: '',
          desc: '',
          code: ''
        }
      ]
    } else {
      optionForm[key as keyof typeof optionForm] = ''
    }
  }
}

const {
  list,
  loading,
  optionDialogVisible,
  optionDoalogTitle,
  count,
  getList,
  openDialog,
  addData,
  deleteData,
  updateData,
  uploadFile,
  submitUpdateData
} = normalOptions({
  dialogFormData: optionForm,
  getList: getProblemListApi,
  addData: addProblemApi,
  assignmentData: assignmentData,
  clearFormData: clearFormData,
  uploadFile: upload,
  deleteData: deleteProblemApi,
  updateData: updateProblemApi
})

onMounted(() => {
  // 获得轮播图列表
  getList()
})

// 添加标签
const handleInputConfirm = () => {
  if (inputValue.value) {
    optionForm.tag.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

// 显示标签输入框
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

// 删除标签
const handleClose = (tag: string) => {
  optionForm.tag.splice(optionForm.tag.indexOf(tag), 1)
}

// 点击分页
const pageChangeHandler = (page: number) => {
  getList(page)
}

// 删除封面poster
const deleteImage = () => {
  optionForm.poster = ''
}

// 选择了poster
const addImage = async (f: File) => {
  const res = await uploadFile(f)
  optionForm.poster = res
}

// 删除详情图片
const deleteImageContent = (index: number, parentIndex: number) => {}

// 选择了详情图片
const addImageContent = async (f: FileList, index: number) => {}

// 点击增加详情内容
const addContent = () => {
  optionForm.content.push({
    subTitle: '',
    desc: '',
    code: ''
  })
  console.log(optionForm)
}

// 提交表单
const submit = () => {
  if (optionDoalogTitle.value === '新增') {
    const obj = JSON.parse(JSON.stringify(optionForm))
    obj.content = JSON.stringify(obj.content)
    obj.tag = obj.tag.join(',')
    addData(obj)
  } else if (optionDoalogTitle.value === '编辑') {
    const obj = JSON.parse(JSON.stringify(optionForm))
    obj.content = JSON.stringify(obj.content)
    obj.tag = obj.tag.join(',')
    submitUpdateData(obj)
  }
}
</script>

<style scoped lang="less">
.upkeep {
  .header {
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    > .el-button {
      width: 150px;
    }
  }
  .content {
    background-color: var(--bgColorTop);
    cursor: pointer;
    .text {
      color: var(--fontColorBase);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .el-pagination {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      padding-bottom: 10px;
    }
    .el-tag {
      font-size: 20px;
      margin-right: 10px;
    }
    :deep .el-table__row {
      background-color: var(--bgColorTop) !important;
    }
    :deep .el-table__cell {
      color: var(--fontColorBase);
      background-color: var(--bgColorTop) !important;
    }
    :deep .el-table__cell {
      border-bottom-color: var(--bgColorBase);
    }
    :deep .el-table__inner-wrapper::before {
      background-color: var(--bgColorTop);
    }
    :deep .el-dialog {
      background-color: var(--bgColorTop);
    }
    :deep .el-form-item__label {
      color: var(--fontColorBase);
    }
    :deep .el-textarea__inner {
      color: var(--fontColorBase);
      background-color: var(--bgColorTop);
    }
    :deep .el-dialog__title {
      color: var(--fontColorBase);
    }
    .poster {
      width: 100px;
    }
  }

  .dia_content {
    width: 100%;
    :deep .el-textarea__inner {
      resize: none;
    }
  }
}
</style>
